{% extends "home.html" %}

{% block title %} Bayanihan: Submit a Report {% endblock %}

{% block nav-submit %} class="nav-active" {% endblock %} 
{% block nav-home %}{% endblock %} 

{% block js %}
	<script type="text/javascript" src="{{MEDIA_URL}}js/OpenLayers.js"></script>
	<script type="text/javascript" src="{{MEDIA_URL}}js/jquery.js"></script>
    <script type="text/javascript" src="{{MEDIA_URL}}js/add_report_map.js"></script> 
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
	{% block map_operations %}
		<script src="{{MEDIA_URL}}js/jquery-ui.min.js"></script>
		<script src="{{MEDIA_URL}}js/jquery-ui-timepicker-addon.js"></script>
		
		<script type="text/javascript">
			$(document).ready( function(){
				init(); 
				activateDrawFeature();
				
				$('#form').submit(function(){
                    $('input[name="latitude"]').val(lat);
					$('input[name="longtitude"]').val(lon);
                    return true;
				});
			})
			
			$(function() {
				$( "#datepicker" ).datetimepicker();
			});
		</script>
	{% endblock %}
{% endblock %}

{% block css %} 
	<link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/submit.css" />
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
{% endblock %}

{% block content %}
	<div id="form">
		<form method="post" action=".">{% csrf_token %}
            <div class="report_row">
				<h4>Deployment</h4>
				<select name="deployment_name" id="deployment_name">
                        <option>Select deployment</option>
                        {% for x in deployments %}
                            <option>{{x}}</option>
                        {% endfor %}
                </select>
			</div>
            
            <div class="details">
                <div class="report_row">
                    <h4>Report Title</h4>
                    <input type="text" name="title" id="title" />
                </div>
                            
                <div class="report_row">
                    <h4>Date</h4>
                    <input type="text" name="date" id="datepicker" />	
                </div>
                
                <div class="report_row">
                    <h4>Description</h4>
                    <textarea rows="10" name="description" id='desc'></textarea>		
                </div>
               
                <div class="report_row">
                    <h4 id="index_name"></h4>
                    <select name="index_level" id="index_level">
                            
                    </select>
                </div>
            </div>
            
			<div class="report_row">
				<input class ="btn_submit" type="submit" name="submit" value="Submit"></input>
			</div>
			
			<input type="hidden" name="index_name"></input>
			<input type="hidden" name="index_level_name"></input>
			<input type="hidden" name="latitude"></input>
			<input type="hidden" name="longtitude"></input> 
		 </form>
	</div> 
	<div id="map"></div>

	<div class="clear"></div>
	
    <script type="text/javascript">
        $('#deployment_name').change(function(){
            deployment_id = $(this).val();
            
            $.get("/test/", { 
                deployment_id: deployment_id
            }, function(data) {
                index_details = jQuery.parseJSON(data);
                index_name = index_details['index_name'];
                index_level_names = index_details['index_level_names'];
                
                var html = '<option>Select level</option>';
                for (var i = 0; i < index_level_names.length; i++) {
                    html += ' <option value=' + (i+1) + '>' + index_level_names[i] +'</option>'
                }
                
                $('input[name="index_name"]').val(index_name);
                
                $("#index_name").empty().append(index_name);    
                $("#index_level").empty().append(html);    
                $(".details").show(); 
            });
        });
        
        $('#index_level').change(function(){
            index_level_name = $("#index_level option:selected").text();
            $('input[name="index_level_name"]').val(index_level_name);
        });
    </script>
                
{% endblock %}